<template>
	<view class="box" @click="hancleExpand(item)">
		<view class="box-main">
			<view class="box-main-left">
				<view class="box-main-left-time">
					<view class="box-main-left-index">{{ item.index || index + 1 }}</view>
					{{ item.time }}
				</view>
				<view class="box-main-left-name">
				<text v-if="item.recharge_text">{{ item.recharge_text }} \n</text>
				{{ item.title || item.remark }}
				</view>
			</view>
			<view class="box-main-right">
				<view class="box-main-right-top">
					<slot name="topContent"></slot>
				</view>
				<view class="box-main-right-bottom">
					<slot name="num"></slot>
					<view v-if="item.fold || item.fold === undefined">
						<image v-if="item.isExpand" class="box-main-right-bottom-icon" src="@/package-purse/static/images/up.png" mode="widthFix"></image>
						<image v-else class="box-main-right-bottom-icon" src="@/package-purse/static/images/down.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-if="item.isExpand" class="box-info">
			<slot name="boxInfo"></slot>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		item: {
			type: Object,
			default: () => {}
		},
		index: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	methods: {
		hancleExpand(item) {
			if(item.fold || item.fold === undefined){
				this.$emit('hancleExpand', this.item);
			}
		}
	}
};
</script>
<style scoped lang="scss">
.box {
	width: 100%;
	background: #ffffff;
	border-radius: 14rpx;
}
.box-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28rpx 0;
	&-left {
		&-time {
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		&-index {
			min-width: 67rpx;
			height: 32rpx;
			background: rgba(255, 68, 0, 0.1); /* 使用 RGBA 设置颜色和透明度 */
			border-radius: 0 7rpx 7rpx 0;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 26rpx;
			color: #ff0000;
			text-align: center;
			line-height: 32rpx;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-right: 20rpx;
		}
		&-name {
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin: 36rpx 0 0 30rpx;
		}
	}
	&-right {
		padding-right: 30rpx;
		&-top {
		}
		&-bottom {
			margin-top: 34rpx;
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			justify-content: flex-end;
			&-icon {
				width: 20rpx;
				height: 20rpx;
				margin-left: 11rpx;
			}
		}
	}
}
.box-info {
	border-top: 1rpx solid rgba(245, 245, 245, 0.6);
	padding: 0rpx 25rpx 25rpx 30rpx;
}
</style>
